<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>我的舆情</title>

<meta
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
	name='viewport' />
<meta name="viewport" content="width=device-width" />

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/hipster_cards.css" rel="stylesheet" />

<style>
body {
	background: rgb(238, 239, 241)
}

/*隐藏滚动条*/
html {
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}

html::-webkit-scrollbar {
	width: 0px
}

.card {
	margin-bottom: 20px;
}

.container {
	padding-top: 20px;
}

.card .content, .card .card-header {
	border-bottom: 1px solid rgb(231, 231, 231);
}

.card h5, .card .footer .description, .card .keywords {
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	white-space: nowrap;
}

.card h5 a {
	white-space: nowrap;
}

.card .keywords a {
	color: #9A9A9A;
}

.card .keywords a:hover {
	color: #0096ff;
}

.card .action {
	display: inline;
	float: right;
}

.panel-header {
	border: 1px solid transparent;
	border-radius: 1px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	border-color: #dedede;
}

.row p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 20px;
}

.row p a {
	color: white;
}

.row p a:hover {
	color: black;
}

.brick {
	opacity: 0.7;
	transition: all 0.5s;
}

.brick:hover {
	opacity: 1;
	transform: scale(1.1);
}
</style>
</head>

<body>

	<div class="wrapper">
		<div class="container">
			<div class="panel" id="collection" style="display:none">
				<div class="panel-header" style="background:rgb(250,250,250)">

					<a data-toggle="collapse" href="#collapseList" style="color:black;">
						<div>
							<h3 id="header"
								style="padding-left:30px;font-size:20px;display: inline-block">我的收藏</h3>
						</div>
					</a>
				</div>
				<div id="collapseList" class="panel-collapse collapse panel-body in">
					<div id="collections" class="card-containers"
						style="width:100%;display: inline-block"></div>
				</div>
			</div>

			<div class="panel" id="following" style="display:none">
				<div class="panel-header" style="background:rgb(250,250,250)">

					<a data-toggle="collapse" href="#collapseList2"
						style="color:black;">
						<div>
							<h3 id="header"
								style="padding-left:30px;font-size:20px;display: inline-block">我的关注</h3>
						</div>
					</a>
				</div>
				<div id="collapseList2"
					class="panel-collapse collapse panel-body in">
					<div id="followings" class="brick-containers"
						style="width:100%;display:inline-block">
						<div>
							<div class="row brick-container"
								style="margin:0;margin-right:15px;margin-bottom:30px"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end wrapper -->

</body>

<script src="js/jquery.js " type="text/javascript "></script>
<script src="js/bootstrap.min.js " type="text/javascript "></script>
<script src="js/hipster-cards.js "></script>

<!--  Just for demo	 -->
<script src="js/jquery.tmpl.min.js"></script>

<!-- div模块模板 -->
<script id="div_demo" type="text/x-jquery-tmpl">
            <div class="card-container active-container">
                {{each(i,news) data}}
                    <div id="${news.id}" class="card-box col-md-3 col-sm-6">
                            <div class="card">
                                <div class="content">
                                	<div class="card-header" style="margin-bottom:10px">
                                		<h5 class="title" style="margin-bottom:5px">
                                        	<a href="#" data-target="${news.url}" onclick="view(this)" title="${news.title}">${news.title}</a>
                                    	</h5>
                                    	<p class="description" style="text-align:center;margin-bottom:5px;">${news.date}</p>
                                	</div>
                                    
                                    <p class="description" style="word-wrap:break-word">
										{{if news.content.replace(/\s/g,"").length>100}}
											${news.content.replace(/\s/g,"").substring(0,100)}...
										{{else}}
											${news.content.replace(/\s/g,"")}...
										{{/if}}
									</p>
                
                                    <p class="description keywords">
                                    	关键词:
                                    	<a href="#" onclick="javascript:top.location.href='analysis.html?keyword=${news.keywords.split(',')[0]}'" title="${news.keywords.split(',')[0]}">${news.keywords.split(',')[0]}</a>/
                                    	<a href="#" onclick="javascript:top.location.href='analysis.html?keyword=${news.keywords.split(',')[1]}'" title="${news.keywords.split(',')[1]}">${news.keywords.split(',')[1]}</a>/
                                    	<a href="#" onclick="javascript:top.location.href='analysis.html?keyword=${news.keywords.split(',')[2]}'" title="${news.keywords.split(',')[2]}">${news.keywords.split(',')[2]}</a>
									</p>
                                </div>
                
                                <div class="footer" style="padding:10px 15px 0">
                                    <p class="description source" style="display: inline-block" title="${news.source}">#${news.source}</p>
                                    <div class="action">
                                        <button type="button" button-type="book" class="btn btn-primary btn-xs" onclick="collect(this)">
                                            <span class="glyphicon glyphicon-star"></span> 收藏
                                        </button>
                                    </div>
                
                                </div>
                            </div>
                    </div>
                {{/each}}
            </div>

</script>

<script>
	var addBricks = function(data) {
		var dataArray=data;
		var brickString = '<div class="brick col-md-4 col-sm-4 col-xs-4" style="padding:0 0 15px 15px">' +
			'<div style="background:rgb(152, 185, 255);height:100px;display:table;width:100%">' +
			'</div>' +
			'</div>';

		var rows = new Array();

		var row = $("<div class='row'></div>");
		var rowContent = 0;
		for (var i = 0; i < dataArray.length; i++) {
			var message = "<p><a href='#' onclick=\"javascript:top.location.href='analysis.html?keyword="+dataArray[i]+"'\">" + dataArray[i] + "</a></p>";
			//排成行
			var brickContent = Math.floor(Math.random() * 2) + 1;

			//没有剩余空间
			if (brickContent > 3 - rowContent) {
				brickContent = 1;
			}
			rowContent += brickContent;

			var brick;
			if (brickContent == 1) {
				brick = $(brickString);
				brick.addClass("tall");
			} else {
				var brickNow = brickString.replace("4", "8");
				brick = $(brickNow);
				brick.addClass("grande");
			}
			brick.children("div").append($(message));
			row.append(brick);

			if (rowContent == 3 || i == dataArray.length - 1) {
				rows.push(row);
				row = $("<div class='row'></div>");
				rowContent = 0;
			}
		}

		var colNum = Math.ceil(rows.length / 3);
		for (var i = 0; i < colNum; i++) {
			var colString = "<div class='col-md-4 col-sm-6'></div>";
			var col = $(colString);

			var startNum = 3 * i;
			if (startNum + 2 <= rows.length) {
				col.append(rows[startNum]);
				col.append(rows[startNum + 1]);
				col.append(rows[startNum + 2]);
			} else {
				//剩余一条/两条
				var num = rows.length - startNum + 1;
				for (var j = 0; j < num; j++) {
					col.append(rows[startNum + j]);
				}
			}
			console.log(col);
			$(".brick-container").append(col);
		}
	}
</script>

<script>
	var changeTitleSize = function() {
		var firstContent=$(".active-container").find(".content").eq(0);
		var firstFooter=firstContent.next();
		
		var tempWidth = firstContent.width();
		$("h5").css("width", tempWidth);
		
		var actionWidth=firstFooter.find(".action").eq(0).width()+5;
		$(".source").css("width",tempWidth-actionWidth);
	}

	var changeBoxHeight=function(){
		var tempHeight=$(".active-container .card-box")[0].getBoundingClientRect().height;
		$(".active-container .card-box").each(function(){
			if($(this).height()!=tempHeight){
				$(this).height(tempHeight);
			}
		});
	}
	
	var collect = function(button) {
		var thisButton = $(button);
		var cardbox = thisButton.parents(".card-box");
		var id = cardbox.attr("id");
		var url = "/POSystem/UpdateCollectionServlet?userid=" + localStorage.getItem("userid") + "&newsid=" + id + "&mode=";

		if (thisButton.attr("button-type") == "book") {
			var icon = thisButton.find("span");
			if (icon.hasClass("glyphicon-star-empty")) {
				icon.removeClass("glyphicon-star-empty");
				icon.addClass("glyphicon-star");

				url += "add";
			} else {
				icon.removeClass("glyphicon-star");
				icon.addClass("glyphicon-star-empty");

				url += "delete";
			}

			$.get(url);
		}
	}
	
	var view = function(url) {
		var thisURL = $(url);
		var cardbox = thisURL.parents(".card-box");
		var id = cardbox.attr("id");
		var url = "/POSystem/UpdateViewServlet?userid=" + localStorage.getItem("userid") + "&newsid=" + id + "&mode=add";
		$.get(url);
		
		var target=thisURL.attr("data-target");
		top.location.href= target;
	}
	//新闻标题大小随页面大小变化而变化
	$(window).resize(changeTitleSize);

	$().ready(function() {
		//获得父页面定义的iframe类型
		var contentType = window.parent.contentType;

		var uid = localStorage.getItem("userid");
		var url;
		
		if (contentType == "我的收藏") {
			url = "/POSystem/ViewCollectionServlet?userid=" + uid;
			$("#collection").css("display", "block");

			$.get(url, function(data) {
				var dataJson = JSON.parse(data);
				console.log(dataJson);
				$('#div_demo').tmpl(dataJson).appendTo('.card-containers');
				//单个新闻标题自适应
				changeTitleSize();
				changeBoxHeight();
			});
		} 
		else if (contentType == "我的关注") {
			url = "/POSystem/ViewKeywordServlet?userid=" + uid;
			$("#following").css("display", "block");

			$.get(url, function(data) {
				var dataJson = JSON.parse(data);
				addBricks(dataJson.data);
			});
		}
		
		
	});
</script>

</html>